<template>
  <div class="wrapper-china-region">
    <el-select v-model="codeProvince" @change="ddlChanged('province')">
      <el-option v-for="p in provinces" :key="p.code" :label="p.name" :value="p.code" />
    </el-select>
    <el-select v-show="flagShowCity" v-model="codeCity" @change="ddlChanged('city')">
      <el-option v-for="c in citys" :key="c.code" :label="c.name" :value="c.code" />
    </el-select>
    <el-select v-show="flagShowArea" v-model="codeArea" @change="ddlChanged('area')">
      <el-option v-for="a in areas" :key="a.code" :label="a.name" :value="a.code" />
    </el-select>
    <el-select v-show="flagShowStreet" v-model="codeStreet" @change="ddlChanged('street')">
      <el-option v-for="s in streets" :key="s.code" :label="s.name" :value="s.code" />
    </el-select>
    <el-select v-show="flagShowVillage" v-model="codeVillage" @change="ddlChanged('village')">
      <el-option v-for="v in villages" :key="v.code" :label="v.name" :value="v.code" />
    </el-select>
  </div>
</template>

<script>
import store from '@/store'
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  // 省、市、区县、镇街、村 5级联动
  name: 'ChinaRegionCom',
  props: {},
  setup() {
    const level = ref('province')
    const codeProvince = ref('')
    const codeCity = ref('')
    const codeArea = ref('')
    const codeStreet = ref('')
    const codeVillage = ref('')

    const provinces = ref([])
    const citys = ref([])
    const areas = ref([])
    const streets = ref([])
    const villages = ref([])

    const flagShowCity = ref(false)
    const flagShowArea = ref(false)
    const flagShowStreet = ref(false)
    const flagShowVillage = ref(false)

    // 从api获取所有省的列表
    const listProvince = () => {
      const paramsJson = {
        Level: 'province',
        CodeParent: '',
      }
      store
        .dispatch('china_region/list', paramsJson)
        .then((response) => {
          provinces.value = response
        })
        .catch((error) => {
          console.log('读取所有省列表数据出现错误：', error)
        })
    }

    // 从api获取所有省的列表
    const listChinaRegion = (depth) => {
      let codeParent
      switch (depth) {
        case 'province':
          flagShowArea.value = false
          flagShowStreet.value = false
          flagShowVillage.value = false
          citys.value = []
          areas.value = []
          streets.value = []
          villages.value = []
          codeCity.value = ''
          codeArea.value = ''
          codeStreet.value = ''
          codeVillage.value = ''

          level.value = 'city'
          codeParent = codeProvince.value
          break
        case 'city':
          flagShowStreet.value = false
          flagShowVillage.value = false
          areas.value = []
          streets.value = []
          villages.value = []
          codeArea.value = ''
          codeStreet.value = ''
          codeVillage.value = ''

          level.value = 'area'
          codeParent = codeCity.value
          break
        case 'area':
          flagShowVillage.value = false
          streets.value = []
          villages.value = []
          codeStreet.value = ''
          codeVillage.value = ''

          level.value = 'street'
          codeParent = codeArea.value
          break
        case 'street':
          villages.value = []
          codeVillage.value = ''

          level.value = 'village'
          codeParent = codeStreet.value
          break
        case 'village':
          return
        default:
          return
      }
      const paramsJson = {
        Level: level.value,
        CodeParent: codeParent,
      }
      store
        .dispatch('china_region/list', paramsJson)
        .then((response) => {
          switch (depth) {
            case 'province':
              flagShowCity.value = true
              citys.value = response
              break
            case 'city':
              flagShowArea.value = true
              areas.value = response
              break
            case 'area':
              flagShowStreet.value = true
              streets.value = response
              break
            case 'street':
              flagShowVillage.value = true
              villages.value = response
              break
            case 'village':
              break
            default:
              break
          }
        })
        .catch((error) => {
          console.log('读取所有列表数据出现错误：', error)
        })
    }

    const ddlChanged = (depth) => {
      listChinaRegion(depth)
    }

    onMounted(() => {
      listProvince()
    })

    return {
      level,
      codeProvince,
      codeCity,
      codeArea,
      codeStreet,
      codeVillage,

      provinces,
      citys,
      areas,
      streets,
      villages,

      flagShowCity,
      flagShowArea,
      flagShowStreet,
      flagShowVillage,

      listProvince,
      listChinaRegion,
      ddlChanged,
    }
  },
})
</script>

<style lang="scss" scoped>
.wrapper-china-region {
}
</style>
